<!-- components/EChartsWrapper.vue -->
<template>
  <div ref="chartContainer" :style="{ width, height }"></div>
</template>
<script setup>
import { ref, watch, onBeforeUnmount, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  option: {
    type: Object,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400px'
  }
})

const chartContainer = ref(null)
let chartInstance = null

// 初始化图表
const initChart = () => {
  chartInstance = echarts.init(chartContainer.value)
  chartInstance.setOption(props.option)
}

// 监听配置变化
watch(
  () => props.option,
  (newVal) => {
    chartInstance?.setOption(newVal)
  },
  { deep: true }
)

// 生命周期
onBeforeUnmount(() => {
  chartInstance?.dispose()
})

// 初始化，
onMounted(() => {
    initChart()
})
</script>
